<template>
  <view class="page-container">
    <view class="search-container">
      <u-search placeholder="搜索陪伴师" v-model="keyword" :clearabled="true" :show-action="false" @search="handleSearch"></u-search>
    </view>
    <DaDropdownVue2
      :dropdownMenu="dropdownMenuList"
      themeColor="#007aff"
      textColor="#333333"
      :duration="300"
      @confirm="handleConfirm"
      @close="handleClose"
      @open="handleOpen"
    >
      <template v-slot:slot1="{ item, index }">
        <view style="padding: 40px">自定义插槽内容</view>
      </template>
    </DaDropdownVue2>

    <view class="card_list">
      <view class="card" v-for="(item, index) in listData" :key="index" @click="checkDetail(item)">
        <view class="matching-status" :class="[item.statusClass]">
          {{ getMatchingStatusText(item) }}
        </view>
        
        <view style="padding: 24rpx">
          <view class="teacher-info">
            <view class="avatar-container">
              <image class="avatar" :src="item.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
              <view class="star-badge">{{ item.star_level }}星</view>
            </view>
            
            <view class="info-container">
              <view class="teacher-name">{{ item.name }}</view>
              <view class="teacher-intro">{{ item.intro || '暂无简介' }}</view>
              
              <view class="teacher-stats">
                <view class="stat-item">
                  <u-icon size="24" name="star" style="margin-right: 4rpx; color: #FFA500;"></u-icon>
                  <text>{{ item.rating_average || '暂无' }}</text>
                </view>
                <view class="stat-item">
                  <u-icon size="24" name="calendar" style="margin-right: 4rpx"></u-icon>
                  <text>{{ item.experience_years || 0 }}年</text>
                </view>
                <view class="stat-item">
                  <image src="/static/images/map.png" mode="" style="width: 24rpx; height: 24rpx; margin-right: 4rpx"></image>
                  <text>{{ item.distance || 0 }}km</text>
                </view>
              </view>
              
              <view class="contact-info">
                <view class="contact-item">
                  <u-icon size="24" name="phone" style="margin-right: 6rpx"></u-icon>
                  <text>{{ item.phone }}</text>
                </view>
                <view class="contact-item">
                  <u-icon size="24" name="map" style="margin-right: 6rpx"></u-icon>
                  <text>{{ item.address }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <view class="action-buttons">
            <view class="action_btn btn1" @click.stop="toggleFavorite(item)">
              <u-icon :name="item.is_favorite ? 'star-fill' : 'star'" color="#FFB800" size="16" style="margin-right: 4rpx"></u-icon>
              {{ item.is_favorite ? '已收藏' : '收藏' }}
            </view>
            <view class="action_btn btn1" @click.stop="checkDetail(item)">查看详情</view>
            
            <template v-if="showGrabButtons(item)">
              <view class="action_btn btn-accept" @click.stop="confirmGrab(item.matching_info[0].matching_id, 1, item)">确认接受</view>
              <view class="action_btn btn-reject" @click.stop="confirmGrab(item.matching_info[0].matching_id, 2, item)">拒绝</view>
            </template>
            
            <template v-else>
              <view 
                class="action_btn btn2" 
                :class="[isInviteDisabled(item) ? 'disabled' : '']" 
                @click.stop="handleInvite(item)"
              >
                {{ getInviteButtonText(item.matching_info) }}
              </view>
            </template>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" :load-text="loadText" />
    </view>
  </view>
</template>
<script>
import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue';
import { getTeacherList, matchTeacher, confirmGrab as confirmGrabApi,setFavorite } from '@/api/class_share';
export default {
  components: {
    DaDropdownVue2,
  },
  props: {
    content: {
      type: [Object, Array],
    },
    styles: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      title: 'hello',
      keyword: '',
      status: 'nomore',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '努力加载中',
        nomore: '暂无更多数据',
      },
      listParams: {
        page: 1,
        size: 10,
      },
      schedule_id: '', // 课程id
      scheduleInfo: null, // 排课信息
      filterParams: {},
      listData: [],
      dropdownMenuList: [
        {
          title: '筛选',
          type: 'filter',
          prop: 'filter',
          options: [
            {
              title: '星级',
              type: 'radio',
              prop: 'star_level',
              options: [
                { label: '1星', value: '1' },
                { label: '2星', value: '2' },
                { label: '3星', value: '3' },
                { label: '4星', value: '4' },
                { label: '5星', value: '5' },
              ],
            },
          ],
        },
        {
          title: '排序方式',
          type: 'cell',
          prop: 'sort',
          options: [
            { label: '评分从高到低', value: { sort_by: 'rating_average', order: 'desc' } },
            { label: '评分从低到高', value: { sort_by: 'rating_average', order: 'asc' } },
            { label: '经验从多到少', value: { sort_by: 'experience_years', order: 'desc' } },
            { label: '经验从少到多', value: { sort_by: 'experience_years', order: 'asc' } },
          ],
        },
      ],
    };
  },
  methods: {
    handleSearch() {
      this.getList(this.filterParams, true);
    },
    checkDetail(item) {
      uni.navigateTo({
        url: `/pages/teacher_homepage/index?id=${item.id}`,
      });
    },
    navigateRegister(item) {
      uni.navigateTo({
        url: `/pages/activityconfirmation/activityconfirmation?id=${item.id}`,
      });
    },
    navigate(item) {
      uni.navigateTo({
        url: `/pages/event_details/event_details?id=${item.id}`,
      });
    },
    getList(params, isNeedFresh) {
      if (isNeedFresh) {
        this.listParams.page = 1;
        this.listData = []; // 刷新时清空列表
      }
      const queryParams = {
        ...params,
        ...this.listParams,
        keyword: this.keyword,
        schedule_id: this.schedule_id,
      };
      
      console.log('获取陪伴师列表参数:', queryParams);
      
      uni.showLoading({
        title: '加载中...'
      });
      
      getTeacherList(queryParams).then(res => {
        uni.hideLoading();
        console.log('获取陪伴师列表返回结果:', res);
        
        // 保存排课信息，用于状态检查
        if (res.schedule_info) {
          this.scheduleInfo = res.schedule_info;
          console.log('排课信息:', this.scheduleInfo);
        }
        
        const newList = res.list.data || [];
        console.log('原始列表数据:', newList);
        
        // 确保每个教练的matching_info都被正确处理
        const processedList = newList.map(item => {
          // 如果有匹配信息，确保它是一个数组
          if (item.matching_info) {
            if (!Array.isArray(item.matching_info)) {
              console.log(`陪伴师 ${item.id} ${item.name} 的匹配信息不是数组，转换为数组:`, item.matching_info);
              item.matching_info = [item.matching_info];
            } else if (item.matching_info.length > 0) {
              console.log(`陪伴师 ${item.id} ${item.name} 的匹配信息:`, item.matching_info);
            }
          } else {
            console.log(`陪伴师 ${item.id} ${item.name} 没有匹配信息`);
            item.matching_info = [];
          }

          // 添加状态样式类
          const status = item.matching_info && item.matching_info.length > 0 
            ? parseInt(item.matching_info[0].matching_status)
            : -1;
            
          switch (status) {
            case 0:
              item.statusClass = 'pending';
              break;
            case 1:
              item.statusClass = 'accepted';
              break;
            case 2:
              item.statusClass = 'rejected';
              break;
            default:
              item.statusClass = 'uninvited';
          }
          
          return item;
        });
        
        console.log('处理后的列表数据:', processedList);
        
        this.listData = [...this.listData, ...processedList];
        
        if (this.listData.length >= res.total) {
          this.status = 'nomore';
        } else {
          this.status = 'loadmore';
          this.loadmoreList(res.total);
        }
      }).catch(msg => {
        uni.hideLoading();
        console.error('获取陪伴师列表失败:', msg);
        this.$u.toast(msg);
      });
    },
    loadmoreList(total) {
      if (this.listParams.page * this.listParams.size >= total) {
        this.status = 'nomore';
        return;
      }
      this.status = 'loading';
      this.listParams.page++;
      setTimeout(() => {
        this.getList(this.filterParams, false);
      }, 1000);
    },
    handleConfirm(v) {
      console.log('筛选条件:', v);
      this.filterParams = v;
      this.getList(this.filterParams, true);
    },
    handleClose() {},
    handleOpen() {},
    isInviteDisabled(item) {
      // 首先检查排课状态，如果排课已完成或失败则禁用
      if (this.isScheduleFinished()) {
        return true;
      }
      
      if (!item.matching_info || item.matching_info.length === 0) {
        return false; // 没有匹配记录时可以邀请
      }

      const matching = item.matching_info[0];
      const status = parseInt(matching.matching_status);
      const matchingType = parseInt(matching.matching_type || 1);
      
      // 禁用按钮的情况：
      // 1. 待确认状态 (status=0)，无论是主理人邀请还是陪伴师抢单
      // 2. 已接受状态 (status=1)
      // 3. 陪伴师抢单且待确认状态 (matching_type=2 && status=0)
      if (status === 0 || status === 1 || (matchingType === 2 && status === 0)) {
        console.log('按钮禁用:', {
          id: item.id,
          name: item.name,
          matchingType,
          status
        });
        return true;
      }
      
      return false;
    },
    updateCoachStatus(coach, matchInfo) {
      console.log('开始更新陪伴师状态:', {
        coachId: coach.id,
        coachName: coach.name,
        matchInfo
      });
      
      const index = this.listData.findIndex(item => item.id === coach.id);
      if (index !== -1) {
        // 确保匹配信息包含所有必要字段
        const completeMatchInfo = {
          id: matchInfo.id || 0,
          coach_id: matchInfo.coach_id || coach.id,
          schedule_id: matchInfo.schedule_id || this.schedule_id,
          matching_type: parseInt(matchInfo.matching_type || 1),
          matching_status: parseInt(matchInfo.matching_status || 0),
          response_time: matchInfo.response_time || Math.floor(Date.now() / 1000), // 如果没有响应时间，使用当前时间
          assigner_id: matchInfo.assigner_id || null
        };
        
        console.log('完整的匹配信息:', completeMatchInfo);
        console.log('响应时间:', this.formatTime(completeMatchInfo.response_time));
        
        // 创建新的matching_info数组
        const newMatchingInfo = [completeMatchInfo];

        // 创建新的教练对象，保持响应性
        const newStatusClass = this.getMatchingStatusClassByStatus(completeMatchInfo.matching_status);

        const updatedCoach = {
          ...coach,
          matching_info: newMatchingInfo,
          statusClass: newStatusClass
        };

        // 更新列表中的教练信息
        this.$set(this.listData, index, updatedCoach);
        
        // 打印日志，方便调试
        console.log('更新陪伴师状态成功:', {
          id: coach.id,
          name: coach.name,
          matchingType: completeMatchInfo.matching_type,
          status: completeMatchInfo.matching_status,
          responseTime: this.formatTime(completeMatchInfo.response_time),
          updatedCoach
        });
      } else {
        console.warn('未找到要更新的陪伴师:', coach.id);
      }
    },
    async invite(item) {
      // 排课状态检查
      if (this.isScheduleFinished()) {
        uni.showToast({
          title: this.getScheduleFinishedText(),
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      const coachId = item.id;
      const scheduleId = this.schedule_id;
      if (!scheduleId) {
        this.$u.toast('排课ID不能为空');
        return;
      }
      
      console.log('开始邀请陪伴师:', {
        coachId,
        scheduleId,
        coachName: item.name
      });
      
      try {
        uni.showLoading({
          title: '邀请中...'
        });
        
        const res = await matchTeacher({ 
          schedule_id: scheduleId, 
          coach_id: coachId 
        });
        
        uni.hideLoading();
        
        console.log('邀请陪伴师返回结果:', res);
        
        // 使用接口返回的匹配信息更新状态
        if (res && res.matching_info) {
          console.log('返回的匹配信息:', res.matching_info);
          
          // 确保匹配信息包含必要字段
          if (!res.matching_info.matching_type) {
            console.warn('匹配信息缺少matching_type字段，使用默认值1');
            res.matching_info.matching_type = 1;
          }
          
          if (res.matching_info.matching_status === undefined || res.matching_info.matching_status === null) {
            console.warn('匹配信息缺少matching_status字段，使用默认值0');
            res.matching_info.matching_status = 0;
          }
          
          if (!res.matching_info.response_time) {
            console.warn('匹配信息缺少response_time字段，使用当前时间');
            res.matching_info.response_time = Math.floor(Date.now() / 1000);
          }
          
          this.updateCoachStatus(item, res.matching_info);
          
          // 根据状态显示不同的提示信息
          let statusMsg = '';
          switch (parseInt(res.matching_info.matching_status)) {
            case 0:
              statusMsg = '邀请已发送，等待确认';
              break;
            case 1:
              statusMsg = '课程已完成';
              break;
            case 2:
              statusMsg = '陪伴师已拒绝邀请';
              break;
            default:
              statusMsg = res.msg || '邀请成功';
          }
          
          this.$u.toast(statusMsg);
          
          // 打印更新后的状态
          const updatedItem = this.listData.find(coach => coach.id === item.id);
          if (updatedItem) {
            console.log('更新后的陪伴师状态:', {
              id: updatedItem.id,
              name: updatedItem.name,
              matchingInfo: updatedItem.matching_info,
              responseTime: this.formatTime(updatedItem.matching_info[0].response_time)
            });
          }
        } else {
          console.warn('返回结果中没有匹配信息:', res);
          
          // 检查是否是时间冲突的错误
          if (res.msg && res.msg.includes('陪伴师该时段已排课')) {
            console.error('陪伴师时间冲突:', res.data);
            this.$u.toast('陪伴师该时段已有其他排课，无法邀请');
            
            // 可以在这里显示冲突的详细信息
            if (res.data && res.data.conflict_schedules) {
              console.log('冲突的排课:', res.data.conflict_schedules);
            }
          } else {
            // 如果没有返回匹配信息，刷新列表
            this.getList(this.filterParams, true);
            this.$u.toast(res.msg || '操作成功，已刷新列表');
          }
        }
      } catch (msg) {
        uni.hideLoading();
        console.error('邀请失败:', msg);
        this.$u.toast(msg);
      }
    },
    getMatchingStatus(status, matchingType) {
      if (status === undefined || status === null) {
        return '待邀请';
      }
      
      status = parseInt(status);
      matchingType = parseInt(matchingType || 1);
      
      // 匹配类型：1=系统指派(主理人邀请)，2=自主抢单(陪伴师抢单)
      if (matchingType === 2 && status === 0) {
        return '待确认抢单';
      }
      
      switch (status) {
        case 0:
          return '待确认';
        case 1:
          return '已完成';
        case 2:
          return '已拒绝';
        default:
          return '待邀请';
      }
    },
    getMatchingStatusClass(item) {
      const status = item.matching_info && item.matching_info.length > 0 
        ? item.matching_info[0].matching_status 
        : -1;
      return this.getMatchingStatusClassByStatus(status);
    },
    getMatchingStatusText(item) {
      if (item.matching_info && item.matching_info.length > 0) {
        return this.getMatchingStatus(
          item.matching_info[0].matching_status,
          item.matching_info[0].matching_type
        );
      }
      return '待邀请';
    },
    getMatchingStatusClassByStatus(status) {
      switch (parseInt(status)) {
        case 0:
          return 'pending';
        case 1:
          return 'accepted';
        case 2:
          return 'rejected';
        default:
          return 'uninvited';
      }
    },
    getInviteButtonText(matchingInfo) {
      // 排课已完成或失败时显示状态文本
      if (this.isScheduleFinished()) {
        return this.getScheduleFinishedText();
      }
      
      if (!matchingInfo || matchingInfo.length === 0) {
        return '邀请接单';
      }
      
      const matching = matchingInfo[0];
      const status = parseInt(matching.matching_status);
      const matchingType = parseInt(matching.matching_type || 1);
      
      // 匹配类型：1=系统指派(主理人邀请)，2=自主抢单(陪伴师抢单)
      if (matchingType === 2 && status === 0) {
        return '待确认抢单';
      }
      
      switch (status) {
        case 0:
          return '等待确认';
        case 1:
          return '已完成';
        case 2:
          return '重新邀请';
        default:
          return '邀请接单';
      }
    },
    handleInvite(item) {
      // 检查排课状态
      if (this.isScheduleFinished()) {
        uni.showToast({
          title: this.getScheduleFinishedText(),
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 检查是否可以邀请
      if (this.isInviteDisabled(item)) {
        return;
      }
      this.invite(item);
    },
    async confirmGrab(matchingId, status, item) {
      // 排课状态检查
      if (this.isScheduleFinished()) {
        uni.showToast({
          title: '该排课已完成或失败，无法进行确认操作',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      if (!matchingId) {
        this.$u.toast('匹配记录ID不能为空');
        return;
      }
      
      try {
        uni.showLoading({
          title: status === 1 ? '确认接受中...' : '拒绝中...'
        });
        
        const res = await confirmGrabApi({
          matching_id: matchingId,
          status: status
        });
        
        uni.hideLoading();
        
        // 使用接口返回的匹配信息更新状态
        if (res.matching_info) {
          this.updateCoachStatus(item, res.matching_info);
          this.$u.toast(res.msg || (status === 1 ? '已完成' : '已拒绝'));
        } else {
          // 如果没有返回匹配信息，刷新列表
          this.getList(this.filterParams, true);
          this.$u.toast(res.msg || '操作成功，已刷新列表');
        }
      } catch (msg) {
        uni.hideLoading();
        this.$u.toast(msg);
      }
    },
    // 格式化时间戳为可读时间
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp * 1000);
      return date.toLocaleString();
    },
    showGrabButtons(item) {
      // 排课已完成或失败时不显示抢单按钮
      if (this.isScheduleFinished()) {
        return false;
      }
      
      return item.matching_info && 
             item.matching_info.length > 0 && 
             parseInt(item.matching_info[0].matching_type) === 2 && 
             parseInt(item.matching_info[0].matching_status) === 0;
    },
    
    // 检查排课是否已完成或失败
    isScheduleFinished() {
      if (!this.scheduleInfo) {
        return false;
      }
      
      const status = parseInt(this.scheduleInfo.group_status || 0);
      
      // 根据正确的状态定义
      if (status === 0) {
        return false;
      } else if (status === 9) {
        return true;
      } else {
        return true;
      }
    },
    
    // 获取排课状态文本
    getScheduleFinishedText() {
      if (!this.scheduleInfo) {
        return '排课状态异常';
      }
      
      const status = parseInt(this.scheduleInfo.group_status || 0);
      
      // 根据正确的状态定义
      if (status === 0) {
        return '排课中';
      } else if (status === 9) {
        return '排课失败';
      } else {
        return '排课完成';
      }
    },
    toggleFavorite(item) {
        console.log('开始切换收藏状态:', item);
        item.is_favorite = !item.is_favorite;
        setFavorite({
          id: item.id,
          favorite_status: item.is_favorite
        }).then(res => {
          uni.showToast({
              title: item.is_favorite? '收藏成功' : '取消收藏',
              icon: 'none'
            });
        }).catch(error => {
          console.error('API请求失败:', error);
          item.favorite_status = !item.favorite_status; // 恢复状态
          uni.showToast({
            title: '操作失败，请重试',
            icon: 'none'
          });
        });
    }
  },
  onLoad(option) {
    this.schedule_id = option.id;
    console.log('排课ID:', this.schedule_id);
    this.getList({}, true);
  },
  onPullDownRefresh() {
    this.getList(this.filterParams, true);
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    if (this.status !== 'nomore') {
      this.loadmoreList();
    }
  },
  computed: {
    matchingStatusClass() {
      return (item) => {
        const status = item.matching_info && item.matching_info.length > 0 
          ? parseInt(item.matching_info[0].matching_status)
          : -1;
          
        switch (status) {
          case 0:
            return { pending: true };
          case 1:
            return { accepted: true };
          case 2:
            return { rejected: true };
          default:
            return { uninvited: true };
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  background-color: #ffffff;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  
  /* #ifdef MP-WEIXIN */
  height: 100vh;
  overflow: hidden;
  /* #endif */
}

.search-container {
  padding: 24rpx;
  
  /* #ifdef MP-WEIXIN */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
  /* #endif */
}

.card_list {
  /* #ifdef MP-WEIXIN */
  padding-top: 88rpx; /* search-container的高度 + padding */
  height: calc(100vh - 88rpx);
  overflow-y: auto;
  /* #endif */
  
  /* #ifdef APP-PLUS */
  overflow: auto;
  /* #endif */
  
  padding-bottom: 32rpx;
}

.card {
  position: relative;
  margin: 32rpx 24rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .matching-status {
    position: absolute;
    top: 0;
    left: 0;
    padding: 6rpx 14rpx;
    font-size: 22rpx;
    font-weight: bold;
    color: #fff;
    background-color: #cccccc;
    border-radius: 20rpx 0 12rpx 0;
    z-index: 2;

    &.pending {
      background: linear-gradient(135deg, #ff9800, #f36806);
      box-shadow: 0 2rpx 8rpx rgba(243, 104, 6, 0.3);
    }
    &.accepted {
      background: linear-gradient(135deg, #32d74b, #0dc160);
      box-shadow: 0 2rpx 8rpx rgba(13, 193, 96, 0.3);
    }
    &.rejected {
      background: linear-gradient(135deg, #ff5252, #fa3534);
      box-shadow: 0 2rpx 8rpx rgba(250, 53, 52, 0.3);
    }
    &.uninvited {
      background: linear-gradient(135deg, #90a4ae, #78909c);
      box-shadow: 0 2rpx 8rpx rgba(120, 144, 156, 0.3);
    }
  }
}

.teacher-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.avatar-container {
  position: relative;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  background-color: #f0f0f0;
}

.star-badge {
  position: absolute;
  bottom: -8rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffa500;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 10rpx;
  border-radius: 16rpx;
  font-weight: bold;
  white-space: nowrap;
}

.info-container {
  flex: 1;
  min-width: 0;
}

.teacher-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teacher-intro {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teacher-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 12rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #666;
}

.contact-info {
  .contact-item {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666;
    margin-top: 8rpx;

    text {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       margin-left: 6rpx;
    }
  }
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 24rpx;
  gap: 12rpx;
}

.action_btn {
  padding: 0 30rpx;
  height: 64rpx;
  border-radius: 32rpx;
  text-align: center;
  line-height: 64rpx;
  font-weight: 500;
  font-size: 26rpx;
  white-space: nowrap;
  transition: all 0.3s;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

  &.btn1 {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #0dc160;
    border: 2rpx solid #b8e6c1;
    
    &:active {
      background: linear-gradient(135deg, #d4e6d7, #b8dbc2);
    }
  }

  &.btn2 {
    background: linear-gradient(135deg, #32d74b, #0dc160);
    color: #ffffff;
    box-shadow: 0 4rpx 12rpx rgba(13, 193, 96, 0.3);
    
    &:active {
      background: linear-gradient(135deg, #2bbc42, #0aa344);
    }
  }
  
  &.disabled {
    background: #f2f2f2;
    color: #b0b0b0;
    border: 2rpx solid #e1e1e1;
    pointer-events: none;
    box-shadow: none;
  }

  &.btn-accept {
    background: linear-gradient(135deg, #32d74b, #0dc160);
    color: #fff;
    box-shadow: 0 4rpx 12rpx rgba(13, 193, 96, 0.3);
    
    &:active {
      background: linear-gradient(135deg, #2bbc42, #0aa344);
    }
  }
  
  &.btn-reject {
    background: linear-gradient(135deg, #ff5252, #fa3534);
    color: #fff;
    box-shadow: 0 4rpx 12rpx rgba(250, 53, 52, 0.3);
    
    &:active {
      background: linear-gradient(135deg, #e04848, #e02e2e);
    }
  }
}

.ljbm {
  color: #fff;
  border-radius: 4rpx;
  border: 1px solid transparent;
}

.experience-class {
  width: 88rpx;
  height: 32rpx;
  background: #f36806;
  border-radius: 4rpx;
  font-weight: 400;
  font-size: 22rpx;
  color: #ffffff;
  text-align: center;
  margin-left: 12rpx;
  margin-top: 8rpx;
}
</style>

<style lang="scss" scoped>
.action_btn {
  &.btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rpx 16rpx;
    border-radius: 24rpx;
    font-size: 24rpx;
    background: #F5F5F5;
    color: #666;
    margin-right: 16rpx;
    
    &.active {
      background: #FFF7E6;
      color: #FFB800;
    }
  }
}
</style>